<!DOCTYPE html>
<html>

<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post">
    </blog-post>

  </div>

  <script>
    Vue.component('blog-post', {
      template: `
      <div class="blog-post">
      <h3>{{post.title}}</h3>
      <div v-html="post.content"></div>
      </div>
      `,
      props: ['post']
    })
    var app = new Vue({
      el: '#app',
      data: {
        posts: [
          { id: 1, title: 'My journey with Vue', content: '<span style="color:red">c1</span>' },
          { id: 2, title: 'Blogging with Vue', content: '<span style="color:red">c2</span>' },
          { id: 3, title: 'Why Vue is so fun', content: '<span style="color:red">c3</span>' }
        ],
        title: 'test'
      }
    })
  </script>
</body>

</html>